<template>
	<section>
		<!-- <el-col :span="24" style="padding-bottom: 0px;">
			<el-form 
			v-loading="listLoading"
			element-loading-text="你知道吗？每过去60秒就意味着有一分钟过去了。"
			element-loading-spinner="el-icon-loading"
			element-loading-background="rgba(0, 0, 0, 0.8)" 
			:inline="true"
			>
				<el-col :class="newsDataItems.fixStatus == '1'? 'fixed':''" style="margin: 10px" :span="24" v-for="(newsDataItems,index) in newsData" :key="newsDataItems.id"  :id="'a'+index">
					<el-col :span="4" style="text-align: left;">
						<el-form-item><span :title="newsDataItems.title">{{LimitNumber(newsDataItems.title,15)}}</span></el-form-item>
					</el-col>
					<el-col :span="2">
						<el-select filterable v-model="newsDataItems.brandName" @change="handleSelectBrand(newsDataItems.brandName,index)">
							<el-option v-for="fixBrandItems in fixBrandList" :key="fixBrandItems.id" :value="fixBrandItems.name">{{fixBrandItems.name}}</el-option>
						</el-select>
					</el-col>
					<el-col :span="2"  style="text-align: center;">
						<el-form-item>
							{{newsDataItems.fixBrandName ? newsDataItems.fixBrandName:'--'}}
						</el-form-item>
					</el-col>
					<el-col :span="2">
						<el-select filterable v-model="newsDataItems.modelName" @change="handleSelectModel(newsDataItems.modelName,index)">
							<el-option v-for="fixModelItems in fixModelList" :key="fixModelItems.id" :value="fixModelItems.modelName">{{fixModelItems.modelName}}</el-option>
						</el-select>
					</el-col>
					<el-col :span="2"  style="text-align: center;">
						<el-form-item>
							{{newsDataItems.fixModelName ? newsDataItems.fixModelName:'--'}}
						</el-form-item>
					</el-col>
					<el-col :span="3">
						<el-select filterable multiple v-model="newsDataItems.stylelId" @change="handleSelectStyle(newsDataItems.stylelId)">
 							<el-option :title="fixStyleItems.name" v-for="fixStyleItems in fixStyleList" :key="fixStyleItems.id" :label="LimitNumber(fixStyleItems.name,18)" :value="fixStyleItems.id">{{LimitNumber(fixStyleItems.name,18)}}</el-option>
						</el-select>
					</el-col>
					<el-col :span="4"  style="text-align: center;">
						<el-form-item>
							{{newsDataItems.fixStyleName ? newsDataItems.fixStyleName:'--'}}
						</el-form-item>
					</el-col>
					<el-col :span="1">
						<el-form-item>
							<el-button :class="newsDataItems.fixStatus == '1'? 'changedBtn':''" type="primary" @click="save(newsDataItems.id,index)">{{newsDataItems.fixStatus == '1'? '修改':'保存'}}</el-button>
						</el-form-item>
					</el-col>
				</el-col>
			</el-form>
		</el-col> -->
		
		<el-col :span="24" style="padding-bottom: 0px;">
			<el-form 
			v-loading="listLoading"
			element-loading-text="你知道吗？每过去60秒就意味着有一分钟过去了...嗯...你能看这句话那么久应该是报错了吧..."
			element-loading-spinner="el-icon-loading"
			element-loading-background="rgba(0, 0, 0, 0.8)" 
			:inline="true"
			>
				<el-col :class="newsDataItems.fixStatus == '1'? 'fixed':'init'" style="margin: 20px 0" :span="24" v-for="(newsDataItems,index) in newsData" :key="newsDataItems.id"  :id="'a'+index">
					<el-col :span="4" style="text-align: left;">
						<el-form-item><span @click="toDetail(newsDataItems.content)" style="width: 90%;display: block;margin: 0 auto;margin-top: 10px;cursor: pointer;text-decoration: underline;" title="点击可看新闻详情">{{newsDataItems.title}}</span></el-form-item>
					</el-col>
					<el-col :span="6">
						<el-select style="margin: 10px 0;" filterable v-model="newsDataItems.brandName" @change="handleSelectBrand(newsDataItems.brandName,index)">
							<el-option v-for="fixBrandItems in fixBrandList" :key="fixBrandItems.id" :value="fixBrandItems.name">{{fixBrandItems.name}}</el-option>
						</el-select>
						<el-select style="margin: 10px 0;" filterable v-model="newsDataItems.modelName" @change="handleSelectModel(newsDataItems.modelName,index)">
							<el-option v-for="fixModelItems in fixModelList" :key="fixModelItems.id" :value="fixModelItems.modelName">{{fixModelItems.modelName}}</el-option>
						</el-select>
						<el-select style="width: 100%;margin: 10px 0;" filterable multiple v-model="newsDataItems.stylelId" @change="handleSelectStyle(newsDataItems.stylelId)">
 							<el-option :title="fixStyleItems.name" v-for="fixStyleItems in fixStyleList" :key="fixStyleItems.id" :label="fixStyleItems.name" :value="fixStyleItems.id">{{fixStyleItems.name}}</el-option>
						</el-select>
					</el-col>
					<el-col :span="8">
						<el-form-item style="padding-left: 40px;">
							<p style="text-align: left;">已选车品牌：{{newsDataItems.fixBrandName ? newsDataItems.fixBrandName:'--'}}</p>
							<p style="text-align: left">已选车系 ：{{newsDataItems.fixModelName ? newsDataItems.fixModelName:'--'}}</p>
							<div style="text-align: left;padding-top: 8px;">
								已选车型（可多选）：
								<div style="padding-left: 70px;" v-show="newsDataItems.fixStyleName.length > 0" v-for="item in newsDataItems.fixStyleName">{{item}}</div>
								<div v-show="newsDataItems.fixStyleName.length == 0">--</div>
							</div>
						</el-form-item>
					</el-col>
					<el-col :span="2">
						<el-form-item>
							<el-button style="margin-top: 70px;" :class="newsDataItems.fixStatus == '1'? 'btn':''" type="primary" @click="save(newsDataItems.id,index)">{{newsDataItems.fixStatus == '1'? '修改':'保存'}}</el-button>
						</el-form-item>
					</el-col>
				</el-col>
			</el-form>
		</el-col>

		<!--分页-->
		<el-col :span="24">
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
			</el-pagination>
		</el-col>
	</section>
	
</template>
<script>

	import util from '../../common/js/util'
	//import NProgress from 'nprogress'
	import { getNewsInfo, saveNewsInfo, getFixBrandList, getFixModelList, getFixStyleList, saveFixStyleInfo } from '../../api/api';

	export default {
		data() {
			return {
				filters: {
					keyword:"",
				},
				form: {
					search_brand: '',
					brand: '',
					model: '',
					style: '',
				},
				listLoading: false,
				total: 0,
				page: 1,
				pageSize:20,
				newBrandId:'',
				newBrand:'',
				newModelId:'',
				newId:'',
				fixBrandName: '',
				fixModelName: '',
				fixStyleName: '',
				styleNames:[],
				styleIds:[],
				fixBrandList: [],
				fixModelList: [],
				fixStyleList: [],
				newsData: [],
				urlPageNum: null, //设置一个全局变量，记录当前页数
			}
		},
		methods: {
			handleCurrentChange(val) {
				console.log('当前页数：',val)
				this.page = val
				//this.urlPageNum = val
				this.fixModelList = ''
				this.fixStyleList = ''
				this.styleIds = ''
				let postData = {'pageNum': this.page, 'pageSize': this.pageSize}
				this.getNewsInfo(postData)

				/**
				 * 通过路由改变url地址，让其拼接 '?page='
				 */

				//this.$router.replace({path:'/carStyle/carNewsSetting',query:{page:this.urlPageNum}})
			},
			//获取原始列表
			getNewsInfo(postData) {
				this.listLoading = true;
				getNewsInfo(postData).then((res) => {
					this.newsData = res.data.data.list
					this.total = res.data.data.totalCount
					this.pageSize = res.data.data.pageSize
					this.getFixBrandList()
					this.listLoading = false;
				})
			},

			//获取新品牌列表
			getFixBrandList(){
				getFixBrandList().then((res) => {
					//console.log(res.data.data)
					this.fixBrandList = res.data.data
				})
			},

			//获取新车系列表
			getFixModelList(brandId){
				getFixModelList(brandId).then((res) => {
					//console.log(res.data.data)
					this.fixModelList = res.data.data
				})
			},

			//获取新车型列表
			getFixStyleList(modelId){
				getFixStyleList(modelId).then((res) => {
					//console.log(res.data.data)
					this.fixStyleList = res.data.data
				})
			},

			//保存 修复车型信息
			saveNewsInfo(postData){
				saveNewsInfo(postData).then((res) => {
					//console.log(res)
					if(res.data.code == '1000'){
						this.$notify({
							title: '操作成功',
							message: res.data.msg,
							type: 'success',
							showClose: false
						});
						this.newBrandId = ''
						this.newModelId = ''
						//this.urlPageNum = this.page
						window.setInterval(() => {
							window.location.reload()
						},3000)
					}else{
						this.$notify.error({
							title: '操作失败',
							message: res.data.msg,
							type: 'success'
						});
						this.newBrandId = ''
						this.newModelId = ''
					}
				})
			},

			handleSelectBrand(val,i){
				this.fixBrandList.map((item,index) => {
					if(item.name === val){
						this.newBrandId = this.fixBrandList[index].id
						this.newBrand = this.fixBrandList[index].name
					}
				})
				let newBrandId = this.newBrandId
				let brandId = { 'brandId': newBrandId }
				this.getFixModelList(brandId)
			},

			handleSelectModel(val,i){
				//console.log('----',val)
				this.fixModelList.map((item,index) => {
					if(item.modelName === val){
						this.newModelId = this.fixModelList[index].id
					}
				})
				let modelId = { 'modelId':this.newModelId }
				this.getFixStyleList(modelId)
			},

			handleSelectStyle(idVal){
				//console.log('++++++',idVal)
				this.styleIds = idVal
			},

			save(newId,i){
				if(!newId){
					this.$message({
						message: '新闻Id为空',
						type: 'warning'
					});
					return
				}
				
				if(!this.newBrandId){
					this.$message({
						message: '请选择品牌',
						type: 'warning'
					});
					return
				}

				if(!this.newModelId){
					this.$message({
						message: '请选择车系',
						type: 'warning'
					});
					return
				}

				if(this.styleIds.length == 0){
					this.$message({
						message: '请选择相关车型',
						type: 'warning'
					});
					return
				}
				
				let postData = { 'newId': newId,'styleIds': this.styleIds }
				this.saveNewsInfo(postData)
			},

			//限制字数，显示省略号
			LimitNumber(txt,len) {
				var str = txt;
				str = str.substr(0,len) + '...' ;
				return str
			},
			
			toDetail(content){
				const { href } =  this.$router.resolve({path:'/detail',query:{content:content}})
				window.open(href,'_blank')
			},
			
			
		},

		mounted() {

			/**
			 * 从url中取出当前页数，请求当前页数的新闻列表
			 */
			// const currentUrl = window.location.href
			// let urlPageNum = null
			// if(currentUrl.indexOf('=') == -1){
			// 	urlPageNum = this.page
			// }else{
			// 	urlPageNum = currentUrl.substr(currentUrl.match('=').index + 1, currentUrl.length)
			// }
			let postData = {'pageNum': this.page, 'pageSize': this.pageSize}
			this.getNewsInfo(postData)
		}
	};

</script>

<style scoped>

.init{
	box-shadow: 4px 5px 16px rgba(0,0,0,0.1);
}

.fixed{
	background: rgba(242,242,242,0.4);
	/* box-shadow: 5px -10px 20px rgba(0,0,0,0.1); */
}

.changedBtn{
	color: #20A0FF;
	background-color: #FFFFFF;
}

.btn{
	color: #20A0FF;
	background-color: #FFFFFF;
}
</style>